<template>
    <div class="leftTwo">
        <ThemeTitle :title="title"/>
        <div class="city">
            <el-select class="inputRight" v-model="state1" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <div class="county">
             <el-carousel :interval="4000" type="card" height="300px" width="200px">
                <el-carousel-item v-for="( item , index) in xukeList" :key="index">
                    <div class="title">
                        {{item.title}}
                    </div>
                    <!-- <div class="content">
                        <div v-for="( item1 , index1) in item.content" :key="index1">
                            <div>{{item1.childTitle}}</div>
                            <div>{{item1.line1}}</div>
                            <div>{{item1.line2}}</div>
                            <div>{{item1.line3}}</div>
                            <div>{{item1.line4}}</div>
                        </div>
                    </div> -->
                </el-carousel-item>
            </el-carousel>   
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  provide,
  reactive
} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
export default {
    components: {
        ThemeTitle
    },
   
    setup(){
        const title = provide("title","责任落实情况");
       
        const state1 = ref(" ")
        const options =  [{
                value: '选项1',
                label: '园区0'
            }, {
                value: '选项2',
                label: '园区1'
            }, {
                value: '选项3',
                label: '园区21'
            }, {
                value: '选项4',
                label: '园区2'
            }, {
                value: '选项5',
                label: '园区3'
            }
            , {
                value: '选项5',
                label: '园区4'
            }
            , {
                value: '选项5',
                label: '园区5'
            }
            , {
                value: '选项5',
                label: '园区6'
            }
            , {
                value: '选项5',
                label: '园区7'
            }
        ]
        const xukeList = [
            {
                title:'许可情况',
                content:[
                    {
                        childTitle:'采矿证到期',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    },
                    {
                        childTitle:'安全生产许可证到期',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    }
                ]
            },
            {
                title:'人员管理',
                content:[
                    {
                        childTitle:'安全管理人员证书',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    },
                    {
                        childTitle:'注册工程师人员证书',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    }
                ]
            },
            {
                title:'教育培训',
                content:[
                    {
                        childTitle:'教育培训企业统计',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    },
                    {
                        childTitle:'注册工程师人员证书',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    }
                ]
            },
            {
                title:'隐患排查',
                content:[
                    {
                        childTitle:'教育培训企业统计',
                        line1:'1300',
                        line2:'0',
                        line3:'12'
                    },
                ]
            }
        ]
        
        
       
        onMounted(()=>{
            
        })
        return {
            title,
            state1,
            options,
            xukeList
        }
    }
}
</script>

<style>
    .el-select__popper.el-popper[role=tooltip]{
        background:#031D2B;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
        background:#06C8FF;
        color:#08434C
    }
    .inputRight .el-input__inner{
        background:#031C23;
        border:1px solid #08434C;
        color:#fff
    }   
    .inputRight .el-input__inner::-webkit-input-placeholder{
        color:#fff;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.9;
        line-height: 200px;
        margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
        background-color:#01181F;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color:#01181F;
    }
</style>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .leftTwo
        margin-top:vh(25)
        .city
            margin-top:vh(10)
            margin-bottom:vh(10)
            .cityTitle
                margin-top:vh(22)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .cityWord
                    color:#00EAFF
                    font-size:vw(16)
            .cityList
                display:flex
                margin-top:vh(15)
                margin-bottom:vh(10)
                margin-left:vw(12)
                justify-content :space-between
                .cityItem
                    flex-shrink:0
                    width: vw(78)
                    height: vh(32)
                    line-height:vh(32)
                    text-align:center
                    font-size:vw(14)
                    background: #022D40
                    border: 1px solid #0A4D6A
                    cursor: pointer
                .cityActive
                    background:#1398CF
        .county
            .title
                width:vw(175)
                height:vh(40)
                line-height:vh(40)
                text-align:center
                background: rgba(3,51,65,0.48)
                border: 1px solid #094c56
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .countyWord
                    color:#00EAFF
                    font-size:vw(16)
            .countyList
                display:flex
                flex-wrap:wrap
                margin-left:vw(1)
                .countyItem
                    flex-shrink:0
                    min-width: vw(78)
                    margin-bottom:vh(12)
                    margin-left:vw(10)
                    padding-left:vw(5)
                    padding-right:vw(5)
                    height: vh(32)
                    line-height:vh(32)
                    text-align:center
                    font-size:vw(14)
                    background:  #022D40
                    border: 1px solid #0A4D6A
                    cursor: pointer
                .countyActive
                    background:#1398CF

            
</style>